<template>
  <div class="order-detail-page">
    <div class="page-header-fixed">
      <div class="header-left">
        <a class="back-link" @click="handleBack">
          <ArrowLeftOutlined />
          <span>返回收货开票</span>
        </a>
        <div class="header-title">
          <h2>收货开票详情</h2>
          <a-tag
            v-if="orderDetail"
            :color="ORDER_STATUS_CONFIG[orderDetail.orderStatus]?.color"
          >
            {{
              ORDER_STATUS_CONFIG[orderDetail.orderStatus]?.label ||
              orderDetail.orderStatus
            }}
          </a-tag>
        </div>
        <p class="header-desc">
          运单号：{{ orderDetail?.orderNo || "-" }} · 数字编码：{{
            orderDetail?.goodsCode || "-"
          }}
        </p>
      </div>
    </div>

    <div class="page-content">
      <a-spin :spinning="loading" tip="加载中...">
        <a-tabs v-if="orderDetail" v-model:activeKey="activeTab">
          <a-tab-pane key="overview" tab="开票信息">
            <a-row :gutter="16">
              <a-col :span="24">
                <a-card title="基础信息" class="info-card">
                  <a-descriptions :column="2" bordered>
                    <a-descriptions-item label="运单号">{{
                      orderDetail.orderNo
                    }}</a-descriptions-item>
                    <a-descriptions-item label="数字编码">{{
                      orderDetail.goodsCode || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="发货站点">{{
                      orderDetail.departureSiteName || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="到货站点">{{
                      orderDetail.arrivalSiteName || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="订单状态">
                      <a-tag
                        :color="
                          ORDER_STATUS_CONFIG[orderDetail.orderStatus]?.color
                        "
                      >
                        {{
                          ORDER_STATUS_CONFIG[orderDetail.orderStatus]?.label ||
                          orderDetail.orderStatus
                        }}
                      </a-tag>
                    </a-descriptions-item>
                    <a-descriptions-item label="开票员">{{
                      orderDetail.issuerName || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="实收运费">
                      <span class="price-highlight">{{
                        formatMoney(orderDetail.freightAmount)
                      }}</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="结算运费">
                      <span class="price-highlight">{{
                        formatMoney(orderDetail.settlementAmount)
                      }}</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="付款方式">{{
                      getPaymentLabel(orderDetail.paymentMethod)
                    }}</a-descriptions-item>
                    <a-descriptions-item label="代收款">{{
                      formatMoney(orderDetail.collectionAmount)
                    }}</a-descriptions-item>
                    <a-descriptions-item label="创建时间">{{
                      formatDateTime(orderDetail.createTime)
                    }}</a-descriptions-item>
                    <a-descriptions-item label="备注">{{
                      orderDetail.remark || "-"
                    }}</a-descriptions-item>
                  </a-descriptions>
                </a-card>
              </a-col>

              <a-col :span="12">
                <a-card title="发货信息" class="info-card">
                  <a-descriptions :column="1" bordered>
                    <a-descriptions-item label="发货站点">{{
                      orderDetail.departureSiteName || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="发货人">{{
                      orderDetail.senderName || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="联系电话">{{
                      orderDetail.senderPhone || "-"
                    }}</a-descriptions-item>
                  </a-descriptions>
                </a-card>
              </a-col>

              <a-col :span="12">
                <a-card title="收货信息" class="info-card">
                  <a-descriptions :column="1" bordered>
                    <a-descriptions-item label="到货站点">{{
                      orderDetail.arrivalSiteName || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="收货人">{{
                      orderDetail.receiverName || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="联系电话">{{
                      orderDetail.receiverPhone || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="配送方式">{{
                      orderDetail.deliveryType === "PICKUP"
                        ? "到站自提"
                        : "送货上门"
                    }}</a-descriptions-item>
                    <a-descriptions-item
                      v-if="orderDetail.deliveryOptions"
                      label="附加选项"
                    >
                      <a-tag
                        v-for="opt in orderDetail.deliveryOptions.split(',')"
                        :key="opt"
                        color="blue"
                        style="margin-right: 8px"
                      >
                        {{
                          opt === "SIGN_RECEIPT"
                            ? "签回单"
                            : opt === "PRINT_RECEIPT"
                            ? "打收条"
                            : opt
                        }}
                      </a-tag>
                    </a-descriptions-item>
                    <a-descriptions-item
                      v-if="orderDetail.deliveryType === 'DELIVERY'"
                      label="收货地址"
                      >{{
                        orderDetail.receiverAddress || "-"
                      }}</a-descriptions-item
                    >
                  </a-descriptions>
                </a-card>
              </a-col>

              <a-col :span="12">
                <a-card title="货物信息" class="info-card">
                  <a-descriptions :column="1" bordered>
                    <a-descriptions-item label="货物名称">{{
                      orderDetail.goodsName || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="包装方式">{{
                      orderDetail.goodsPackage || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="件数"
                      >{{
                        orderDetail.goodsPieces || 0
                      }}
                      件</a-descriptions-item
                    >
                  </a-descriptions>
                </a-card>
              </a-col>

              <a-col :span="12">
                <a-card title="运输信息" class="info-card">
                  <a-descriptions :column="1" bordered>
                    <a-descriptions-item label="运输车辆">{{
                      orderDetail.vehiclePlate || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="发车时间">{{
                      orderDetail.dispatchTime
                        ? formatDateTime(orderDetail.dispatchTime)
                        : "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="到货时间">{{
                      orderDetail.arrivalTime
                        ? formatDateTime(orderDetail.arrivalTime)
                        : "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item label="收货司机">{{
                      orderDetail.driverName || "-"
                    }}</a-descriptions-item>
                    <a-descriptions-item
                      v-if="orderDetail.driverPhone"
                      label="司机电话"
                      >{{ orderDetail.driverPhone || "-" }}</a-descriptions-item
                    >
                    <a-descriptions-item label="分配时间">{{
                      orderDetail.assignTime
                        ? formatDateTime(orderDetail.assignTime)
                        : "-"
                    }}</a-descriptions-item>
                  </a-descriptions>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane key="timeline" tab="流程轨迹">
            <a-card class="info-card">
              <a-timeline>
                <a-timeline-item color="green">
                  <p class="timeline-time">
                    {{ formatDateTime(orderDetail.createTime) }}
                  </p>
                  <p class="timeline-title">创建开票</p>
                  <p class="timeline-desc">
                    开票员：{{ orderDetail.issuerName || "-" }}
                  </p>
                </a-timeline-item>
                <a-timeline-item v-if="orderDetail.assignTime" color="blue">
                  <p class="timeline-time">
                    {{ formatDateTime(orderDetail.assignTime) }}
                  </p>
                  <p class="timeline-title">分配收货司机</p>
                  <p class="timeline-desc">
                    司机：{{ orderDetail.driverName || "-" }}
                  </p>
                </a-timeline-item>
                <a-timeline-item v-if="orderDetail.dispatchTime" color="green">
                  <p class="timeline-time">
                    {{ formatDateTime(orderDetail.dispatchTime) }}
                  </p>
                  <p class="timeline-title">车辆发车</p>
                  <p class="timeline-desc">
                    车辆：{{ orderDetail.vehiclePlate || "-" }}
                  </p>
                </a-timeline-item>
                <a-timeline-item v-if="orderDetail.arrivalTime" color="purple">
                  <p class="timeline-time">
                    {{ formatDateTime(orderDetail.arrivalTime) }}
                  </p>
                  <p class="timeline-title">货物到达</p>
                </a-timeline-item>
                <a-timeline-item v-if="orderDetail.deliveryTime" color="green">
                  <p class="timeline-time">
                    {{ formatDateTime(orderDetail.deliveryTime) }}
                  </p>
                  <p class="timeline-title">确认送达</p>
                </a-timeline-item>
                <a-timeline-item v-if="orderDetail.cancelTime" color="red">
                  <p class="timeline-time">
                    {{ formatDateTime(orderDetail.cancelTime) }}
                  </p>
                  <p class="timeline-title">取消开票</p>
                  <p class="timeline-desc">
                    原因：{{ orderDetail.cancelReason || "-" }}
                  </p>
                </a-timeline-item>
              </a-timeline>
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { message } from "ant-design-vue";
import { ArrowLeftOutlined } from "@ant-design/icons-vue";
import { getOrderById } from "@/api/tenant/order";
import type { Order } from "@/types/order";
import { ORDER_STATUS_CONFIG } from "@/types/order";
import { useDictionary } from "@/composables/useDictionary";
import { formatDateTime, formatMoney } from "@/utils/format";

const router = useRouter();
const route = useRoute();

const activeTab = ref("overview");
const orderDetail = ref<Order | null>(null);
const loading = ref(false);

// 包括已禁用的字典项，确保历史订单能正确显示已删除的支付方式标签
const { getLabel: getPaymentLabel, loadDictionaries: loadPaymentMethods } =
  useDictionary("PAYMENT_METHOD", true, true);

const fetchOrderDetail = async () => {
  const id = Number(route.params.id);
  if (!id) {
    message.error("订单ID无效");
    handleBack();
    return;
  }
  loading.value = true;
  try {
    const response = await getOrderById(id);
    orderDetail.value = response.data as any;
  } catch (error) {
    console.error("获取收货开票详情失败:", error);
  } finally {
    loading.value = false;
  }
};

const handleBack = () => {
  router.push("/tenant/order");
};

onMounted(async () => {
  await loadPaymentMethods();
  await fetchOrderDetail();
});
</script>

<style scoped>
.order-detail-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.page-header-fixed {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #fff;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.back-link:hover {
  color: var(--primary-color);
}

.page-content {
  flex: 1;
  overflow: auto;
  padding: 0 16px 16px;
}

.info-card {
  margin-bottom: 16px;
  border: none;
  box-shadow: var(--shadow-card);
}

::deep(.info-card .ant-card-head) {
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
}

.price-highlight {
  color: var(--primary-color);
  font-weight: 600;
}

.timeline-time {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 4px;
}

.timeline-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.timeline-desc {
  color: var(--text-secondary);
  margin: 0;
}
</style>
